<template>
	<u-tabbar fixed :value="selected" @change="switchTab" activeColor="#0987F5" :placeholder="false" :safeAreaInsetBottom="false">
		<image class="footer-add" src="../../../static/iconAdd.png" @click="addChargeStation"></image>
		<u-tabbar-item v-for="(item,index) in tabbarList" :text="item.text" :key="index">
			<image class="tabbar-icon" slot="active-icon" :src="item.selectedIconPath"></image>
			<image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		name: "tab-bar",
		props: {
			selected: {
				type: Number
			}
		},
		data() {
			return {
				tabbarList: [{
					pagePath: '/pages/chargeList/index',
					text: '首页',
					iconPath: '../../../static/tabBar/home.png',
					selectedIconPath: '../../../static/tabBar/homeFill.png'
				}, {
					pagePath: '/pages/chargeRecord/index',
					text: '充电记录',
					iconPath: '../../../static/tabBar/record.png',
					selectedIconPath: '../../../static/tabBar/recordFill.png'
				}]
			};
		},
		methods: {
			switchTab(val) {
				uni.switchTab({
					url: this.tabbarList[val].pagePath
				})
			},
			addChargeStation() {
				uni.navigateTo({
					url: `/pages/chargeList/addEditCharge/index`,
					fail: error => {
						console.log('error；', error)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.tabbar-icon {
		height: 22rpx * 2;
		width: 22rpx * 2;
		padding: 3rpx * 2;
	}
	.footer-add {
		width: 72rpx * 2;
		height: 72rpx * 2;
		position: absolute;
		top: -40rpx * 2;
		margin-left: 50%;
		left: -36rpx * 2;
	}
</style>
